<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css选择器</title>

        <style>
            /*标签名选择器*/
            h4{
                color: red;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            /*id选择器*/
            #d2{
                border: 5px solid black;
            }
            /*类选择器*/
            .error{
                background-color: red;
            }
            .success{
                background-color: green;
            }
            /*提出里面的公共部分*/
            .msg{
                color: black;
            }
            /*伪类选择器
               hover选中元素悬停状态
              紧挨着写是与的关系；必须满足所有条件才可以生效样式
            */
            #d2:hover{
                background-color: yellow;
            }
            /*群组选择器，逗号隔开，是“或”的关系 只要满足其中一个即可*/
            #d2,h4,.error{
                text-decoration: underline;/*文本修饰：下划线*/
            }

            /*通配选择器：选中所有的元素*/
            *{
                font-style: italic;/*文字样式：斜体*/
            }

            /*伪类选择器*/
            a:link{/*未被访问过的状态*/
                color: gray;
            }
            a:visited{/*已被访问过的状态*/
                color: green;
            }
            a:hover{/*悬停状态*/
                color: orange;
            }
            a:active{/*激活状态*/
                color: red;
            }
            /*属性选择器*/
           input[type="text"]{
                background-color: black;
            }

           /*后代选择器：选中包含在内的所有后代元素 子元素 孙元素。。。*/
            div span{
                color: black;
            }
            /*直接子代选择器*/
            #d1>div>span{
                color: #22ffaa;
            }
        </style>
    </head>
    <body>
        <h4>我是标题</h4>
        <p>我是段落</p>
        <a href="#">我是超链接</a>
        <h4>我是标题2</h4>

        <div>我是div1</div>
        <div id="d2">我是div2</div>
        <div>我是div3</div>
        <hr>
        <!--msg 是一个标签-->
        <span class="error msg">用户名被占用</span>
        <span class="error msg">两次密码不一致</span>
        <br>
        <span class="success msg">手机号格式正确</span>
        <span class="success msg">邮箱格式正确</span>
        <hr>

        <a href="https://www.baidu.com">我是超链接1</a>
        <a href="abc">我是超链接2</a>
        <hr>

        <input type="text">
        <input type="password">
        <hr>
        <div id="d1">
            <span>1</span>
            <div>
                <span>2</span>
                <b>测试文字</b>
                <p>你好呀<span>小可爱</span></p>
            </div>
            <span>3</span>
        </div>
    </body>
</html>